<template>
  <div class="suoyou">
      <div v-for="(item,index) in list" :key="index" 
      class="list_sy"
      @click="onClickSuoyouList(item)">
          <div class="icon_list_img">
              <img :src="item.icon" alt="">
          </div>
          <div>
              {{item.name}}
          </div>
      </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
        return{
            list:[]
        }
    },
    mounted(){
        axios.get("https://api.it120.cc/small4/shop/goods/category/all").then(res=>{
            // console.log(res);
            this.list = res.data.data
            // console.log(this.list);
        }) 
    },
    methods:{
        onClickSuoyouList(item){
            this.$router.push({
                path:"/searchlist",
                query:{
                    id:item.id
                }
            })
        }
    }
}
</script>

<style>
.icon_list_img
{
    width: 100%;
}
.icon_list_img img
{
    width: 100%;
}
.list_sy
{
    width: 25%;
    height:5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.5rem;
}
.suoyou
{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
</style>